<template>
  <div class="back" style=" height: calc(100vh - 100px)">


    <div style="height: 50px;"></div>

    <el-table v-loading="loading" :data="orderList">
      <el-table-column label="订单号" align="center" prop="orderId"/>
      <el-table-column label="门票" align="center" prop="ordersGoods">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="chakan(scope.row.ordersGoods,scope.row.ordersStatus)"
          >查看门票详情
          </el-button>
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center" prop="ordersStatus"/>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
              v-if="scope.row.ordersStatus == '已购票'"
              size="mini"
              type="text"
              @click="handleDelete(scope.row)"
          >退票
          </el-button>

          <div  v-if="scope.row.ordersStatus == '已退票'">无操作</div>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog title="订单门票详情" :visible.sync="open" width="80%" append-to-body>
      <el-table v-loading="loading" :data="cartList">
        <el-table-column label="名称" align="center" prop="toursimInfo.name" show-overflow-tooltip/>

        <el-table-column label="图片" align="center" prop="toursimInfo.photo" width="180">
          <template slot-scope="scope">
            <div v-if="!scope.row.toursimInfo.photo">暂无图像</div>
            <div v-else>
              <el-image
                  style="width: 50px; height: 50px"
                  :src="scope.row.toursimInfo.photo.split(',')[0]"
                  :preview-src-list="scope.row.toursimInfo.photo.split(',')">
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="描述" align="center" prop="toursimInfo.content" width="180" show-overflow-tooltip/>
        <el-table-column label="价格" align="center" prop="toursimInfo.price"/>
        <el-table-column label="数量" align="center" prop="toursimInfo.number">
        </el-table-column>
        <el-table-column  label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">

            <el-button

                size="mini"
                type="text"
                @click="pingjia(scope.row)"
            >评价
            </el-button>




          </template>
        </el-table-column>

      </el-table>
    </el-dialog>



  </div>



</template>

<script>

import {listOrders, getOrders, delOrders, addOrders, updateOrders} from "@/api/project/orders";

export default {
  name: "index",
  data() {
    return {
      orderList:[],
      loading:false,
      cartList:[],
      open:false,
      userInfo:{}
    }
  },

  created() {
    this.userInfo=JSON.parse(localStorage.getItem("userInfo"))
    this.getList();
  },
  methods: {
    pingjia(e){

      this.$router.push({ path: 'tourism/comments', query: { id: e.toursimInfo.id } });
    },
    handleDelete(row) {
      this.$confirm('是否确认退票？').then(function () {
        row.ordersStatus="已退票"
        return updateOrders(row);
      }).then(() => {
        this.getList();
        this.$message.success("退票成功");
      }).catch(() => {
      });
    },


    chakan(e,f){
      let data= JSON.parse(e)
      data.forEach(res=>{
        res.ordersStatus=f
      })
      this.cartList=data
      console.log(data)
      this.open=true
    },
    getList() {
      this.loading = true;
      listOrders().then(response => {
        let data = response.data.filter(data =>  data.orderType=="门票");


        data=data.filter(item=>{
          return item.userId==this.userInfo.id
        })

        this.orderList = data;
        this.total = data.length;
        this.loading = false;
      });
    },

  }
}
</script>

<style scoped>
.back{
  background-image: url('../../assets/bg.png');
  background-size: cover;
}

</style>
